import { isNil, trimStart } from "lodash";
import React, { useEffect, useState } from "react";
import AceEditor from "react-ace";
import * as Grid from "antd/lib/grid";
import Tooltip from "antd/lib/tooltip";
import Button from "antd/lib/button";
import { Section, Switch, Select } from "@/components/visualizations/editor";
import { EditorPropTypes } from "@/visualizations/prop-types";
import QuerySnippet from "@/../../../../client/app/services/query-snippet";
import FullscreenOutlinedIcon from "@ant-design/icons/FullscreenOutlined";
import FullscreenExitOutlinedIcon from "@ant-design/icons/FullscreenExitOutlined";

import 'ace-builds/src-noconflict/mode-javascript'; // json模式的包
import "ace-builds/src-noconflict/theme-github";
import 'ace-builds/src-noconflict/ext-language_tools';

export default function CustomChartSettings({ options, onOptionsChange }) {
  const defaultCustomCode = options.globalSeriesType === "table" ? trimStart(`
// 传入参数： data, x, ys, container, scheme, parameter, options 和 $、TableToExcel、row、onclickhandler、onrefreshdashboardhandler、onrefreshwidgethandler、onExpandDashboardHandler。
// data: 为全部结果集数据。x：为x轴返回值数组。ys：为y轴返回值数组对象，如ys.field1等获取对应y轴返回值数组。
// container：为容器div对象。
// scheme：样式对象，属性style,mode,bg,back,color,titleback,titlecolor。
// parameter：为url参数对象，每个url参数名值构成。
// options：为Datatables的默认options对象，内置中文翻译。
// 调用：container.innerHTML ="<table id=table1 />"; $("table1").DataTable(options); TableToExcel.convert(document.getElementById("table1"));
// row 为Table视图中应用自定义代码视图列类型时，传入的行记录结果对象。
// onclickhandler 为点击事件函数，参数为对象{key:value}。
// onrefreshdashboardhandler/onrefreshwidgethandler/onExpandDashboardHandler 为强制刷新报表或部件数据以及调用弹窗的函数。
// 示例和参考：https://www.dazdata.com/docs/college/table.html
// 内置d3和jQuery的$对象，加载远程文件：d3.csv()或d3.json()或d3.text()或d3.xml()
`) : options.globalSeriesType === "three" ? trimStart(`
// 传入参数： data, x, ys, container, scheme, parameter 和 THREE、$、row、onclickhandler、onrefreshdashboardhandler、onrefreshwidgethandler、onExpandDashboardHandler。
// data: 为全部结果集数据。x：为x轴返回值数组。ys：为y轴返回值数组对象，如ys.field1等获取对应y轴返回值数组。
// container：为容器div对象。
// scheme：样式对象，属性style,mode,bg,back,color,titleback,titlecolor。
// parameter：为url参数对象，每个url参数名值构成。
// 调用：const renderer = new THREE.WebGLRenderer();container.appendChild( renderer.domElement );
// row 为Table视图中应用自定义代码视图列类型时，传入的行记录结果对象。
// onclickhandler 为点击事件函数，参数为对象{key:value}。
// onrefreshdashboardhandler/onrefreshwidgethandler/onExpandDashboardHandler 为强制刷新报表或部件数据以及调用弹窗的函数。
// 示例和参考：https://www.dazdata.com/docs/college/three.html
// 内置d3和jQuery的$对象，加载远程文件：d3.csv()或d3.json()或d3.text()或d3.xml()
`) : options.globalSeriesType === "echarts" ? trimStart(`
// 传入参数： data, x, ys, chartDom, scheme, parameter 和 echarts、$、row、onclickhandler、onrefreshdashboardhandler、onrefreshwidgethandler、onExpandDashboardHandler。
// data: 为全部结果集数据。x：为x轴返回值数组。ys：为y轴返回值数组对象，如ys.field1等获取对应y轴返回值数组。
// chartDom：为容器div对象。
// scheme：样式对象，属性style,mode,bg,back,color,titleback,titlecolor。
// parameter：为url参数对象，每个url参数名值构成。
// 调用：var myChart = echarts.init(chartDom);
// row 为Table视图中应用自定义代码视图列类型时，传入的行记录结果对象。
// onclickhandler 为点击事件函数，参数为对象{key:value}，例如：myChart.off('click');myChart.on('click', function (params) {onclickhandler(params);});
// onrefreshdashboardhandler/onrefreshwidgethandler/onExpandDashboardHandler 为强制刷新报表或部件数据以及调用弹窗的函数。
// 示例和参考：https://echarts.apache.org/zh/index.html
// 内置d3和jQuery的$对象，加载远程文件：d3.csv()或d3.json()或d3.text()或d3.xml()

var myChart = echarts.init(chartDom);
var option;



option && myChart.setOption(option);
`) : trimStart(`
// 传入参数： data, x, ys, element, scheme, parameter 和 Plotly、$、row、onclickhandler、onrefreshdashboardhandler、onrefreshwidgethandler、onExpandDashboardHandler。
// data: 为全部结果集数据。x：为x轴返回值数组。ys：为y轴返回值数组对象，如ys.field1等获取对应y轴返回值数组。
// element：为容器div对象。
// scheme：样式对象，属性style,mode,bg,back,color,titleback,titlecolor。
// parameter：为url参数对象，每个url参数名值构成。
// 调用：Plotly.plot(element, data, layout, config);
// row 为Table视图中应用自定义代码视图列类型时，传入的行记录结果对象。
// onclickhandler 为点击事件函数，参数为对象{key:value}，例如：container.on('plotly_click', function (params) {onclickhandler(params);});
// onrefreshdashboardhandler/onrefreshwidgethandler/onExpandDashboardHandler 为强制刷新报表或部件数据以及调用弹窗的函数。
// 示例和参考：https://www.dazdata.com/docs/college/plotlyjs/1.html
// 内置d3和jQuery的$对象，加载远程文件：d3.csv()或d3.json()或d3.text()或d3.xml()
  `);

  const [querySnippets, setQuerySnippets] = useState([]);
  const [fullscreen, setFullscreen] = useState(false);

  useEffect(() => {
    QuerySnippet.type(options.globalSeriesType).then(snippets => setQuerySnippets(snippets));
  }, [options.globalSeriesType]);

  return (
    <div class={fullscreen ? "ant-modal-content" : null}
      style={fullscreen ? {position: 'absolute', height: 'calc(100%-200px)', padding: '3px', margin: '5px'} : null}
    >
      <Section>
        <Grid.Row gutter={15} type="flex" align="middle">
          <Grid.Col span={22}>
            <Select
              mode="default"
              showSearch
              placeholder="代码模板..."
              onChange={value => onOptionsChange({ customCode: (isNil(options.customCode) ? '' : options.customCode) + '\r\n// 模板代码开始\r\n' + value + '\r\n// 模板代码结束\r\n' })}
            >
              {querySnippets.map(item => (  
                <Select.Option key={item.trigger} value={item.snippet}>
                  <img src={item.profile_image_url} width="48" height="48" />
                  {' ' + item.trigger + ' ' + item.description}
                </Select.Option>
              ))}
            </Select>
          </Grid.Col>
          <Grid.Col span={2}>
            <Tooltip title={fullscreen ? "退出全屏" : "全屏"}>
              <Button 
                icon={fullscreen ? <FullscreenExitOutlinedIcon /> : <FullscreenOutlinedIcon />} 
                onClick={() => setFullscreen(!fullscreen)}
              />
            </Tooltip>
          </Grid.Col>
        </Grid.Row>
      </Section>
      <Section>
        <AceEditor
          label="自定义代码"
          mode="javascript" // 模式
          theme="github"    // 主题
          onChange={value => {
            onOptionsChange({ customCode: value });
          }}
          enableLiveAutocompletion
          name="UNIQUE_ID_OF_DIV" // 唯一明明
          value={isNil(options.customCode) ? defaultCustomCode : options.customCode}
          editorProps={{ $blockScrolling: true }}
          fontSize={12}
          width="100%"
          height={fullscreen ? "692px" : "346px"}
        />        
      </Section>

      <Section>
        <Grid.Row gutter={15} type="flex" align="middle">
          <Grid.Col span={12}>
            <Switch
              data-test="Chart.Custom.EnableConsoleLogs"
              defaultChecked={options.enableConsoleLogs}
              onChange={enableConsoleLogs => onOptionsChange({ enableConsoleLogs })}>
              在终端显示错误
            </Switch>
          </Grid.Col>
          <Grid.Col span={12}>
            <Switch
              id="chart-editor-auto-update-custom-chart"
              data-test="Chart.Custom.AutoUpdate"
              defaultChecked={options.autoRedraw}
              onChange={autoRedraw => onOptionsChange({ autoRedraw })}>
              自动更新图表
            </Switch>
          </Grid.Col>
        </Grid.Row>
      </Section>
    </div>
  );
}

CustomChartSettings.propTypes = EditorPropTypes;
